<template>
  <el-container>
    <el-header>
      <h1>用户管理</h1>
    </el-header>

    <el-main>
      <el-row :gutter="20">
        <!-- 显示所有用户 -->
        <el-col :span="24">
          <el-card>
            <h2>所有用户</h2>
            <el-table :data="users" style="width: 100%">
              <el-table-column prop="username" label="用户名" width="180"></el-table-column>
              <el-table-column prop="email" label="邮箱" width="220"></el-table-column>
              <el-table-column prop="points" label="积分" width="120"></el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <!-- 根据ID获取用户 -->
        <el-col :span="24">
          <el-card>
            <h2>根据ID获取用户</h2>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="userId" placeholder="输入用户ID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getUserById">获取用户</el-button>
              </el-form-item>
            </el-form>
            <p v-if="selectedUser">
              用户名: {{ selectedUser.username }} - 邮箱: {{ selectedUser.email }} - 积分: {{ selectedUser.points }}
            </p>
          </el-card>
        </el-col>

        <!-- 创建用户 -->
        <el-col :span="24">
          <el-card>
            <h2>创建用户</h2>
            <el-form :inline="true">
              
              <el-form-item>
              <el-input v-model="newUser.userId" placeholder="输入用户ID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="newUser.username" placeholder="输入用户名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="newUser.email" placeholder="输入邮箱"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="newUser.points" placeholder="输入积分"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="createUser">创建用户</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <!-- 删除用户 -->
        <el-col :span="24">
          <el-card>
            <h2>删除用户</h2>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="deleteUserId" placeholder="输入要删除的用户ID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="deleteUser">删除用户</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <!-- 用户签到 -->
        <el-col :span="24">
          <el-card>
            <h2>用户签到</h2>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="checkInUserId" placeholder="输入用户ID以签到"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="checkInUser">签到</el-button>
              </el-form-item>
            </el-form>
            <p v-if="checkInResult !== null">签到结果: {{ checkInResult }}</p>
          </el-card>
        </el-col>

        <!-- 根据消费增加积分 -->
        <el-col :span="24">
          <el-card>
            <h2>根据消费增加积分</h2>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="purchaseUserId" placeholder="输入用户ID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="purchaseAmount" placeholder="输入消费金额"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addPointsForPurchase">增加积分</el-button>
              </el-form-item>
            </el-form>
            <p v-if="purchaseResult !== null">增加的积分: {{ purchaseResult }}</p>
          </el-card>
        </el-col>

        <!-- 减少积分 -->
        <el-col :span="24">
          <el-card>
            <h2>减少积分</h2>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="reducePointsUserId" placeholder="输入用户ID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="reducePointsAmount" placeholder="输入要减少的积分数"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="reducePoints">减少积分</el-button>
              </el-form-item>
            </el-form>
            <p v-if="reducePointsResult !== null">减少的积分: {{ reducePointsResult }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      userId: '',
      selectedUser: null,
      newUser: {
        username: '',
        email: '',
        points: 0,
      },
      deleteUserId: '',
      checkInUserId: '',
      checkInResult: null,
      purchaseUserId: '',
      purchaseAmount: '',
      purchaseResult: null,
      reducePointsUserId: '',
      reducePointsAmount: '',
      reducePointsResult: null,
    };
  },
  methods: {
    async getAllUsers() {
      try {
        const response = await axios.get('http://localhost:8080/api/users');
        this.users = response.data;
      } catch (error) {
        console.error('获取用户失败:', error);
      }
    },
    async getUserById() {
      try {
        const response = await axios.get(`http://localhost:8080/api/users/${this.userId}`);
        this.selectedUser = response.data;
      } catch (error) {
        console.error('获取用户失败:', error);
      }
    },
    async createUser() {
      try {
        await axios.post('http://localhost:8080/api/users/a', this.newUser);
        this.getAllUsers();
      } catch (error) {
        console.error('创建用户失败:', error);
      }
    },
    async deleteUser() {
      try {
        await axios.delete(`http://localhost:8080/api/users/${this.deleteUserId}`);
        this.getAllUsers();
      } catch (error) {
        console.error('删除用户失败:', error);
      }
    },
    async checkInUser() {
      try {
        const response = await axios.post(`http://localhost:8080/api/users/${this.checkInUserId}/checkin`);
        this.checkInResult = response.data;
      } catch (error) {
        console.error('用户签到失败:', error);
      }
    },
    async addPointsForPurchase() {
      try {
        const response = await axios.post(`http://localhost:8080/api/users/${this.purchaseUserId}/purchase`, null, {
          params: { amount: this.purchaseAmount },
        });
        this.purchaseResult = response.data;
      } catch (error) {
        console.error('增加积分失败:', error);
      }
    },
    async reducePoints() {
      try {
        const response = await axios.post(`http://localhost:8080/api/users/${this.reducePointsUserId}/reduce`, null, {
          params: { points: this.reducePointsAmount },
        });
        this.reducePointsResult = response.data;
      } catch (error) {
        console.error('减少积分失败:', error);
      }
    },
  },
  mounted() {
    this.getAllUsers();
  },
};
</script>
